
<script setup>
import  {ref,computed} from 'vue';
import { useAllDataStore } from '@/stores/indes.js';
import {useRoute,useRouter} from "vue-router";
// 菜单动态数据 path地址 label 名字 icon 图标 children下级菜单数据
// const list=ref([
//   {
//     path: '/home',
//     name: 'home',
//     label: '首页',
//     icon: 'house',
//     url: 'Home'
//   },
//   {
//     path: '/mall',
//     name: 'mall',
//     label: '商品管理',
//     icon: 'video-play',
//     url: 'Mall'
//   },
//   {
//     path: '/user',
//     name: 'user',
//     label: '用户管理',
//     icon: 'user',
//     url: 'User'
//   },
//   {
//     path: 'other',
//     label: '其他',
//     icon: 'location',
//     children: [
//       {
//         path: '/page1',
//         name: 'page1',
//         label: '页面1',
//         icon: 'setting',
//         url: 'Page1'
//       },
//       {
//         path: '/page2',
//         name: 'page2',
//         label: '页面2',
//         icon: 'setting',
//         url: 'Page2'
//       }
//     ]
//   }
//
// ]);
const list=computed(()=>store.state.menuList)
const router = useRouter()
const route = useRoute()
const handleMenu =(item)=>{
  router.push(item.path)
  store.selectMenu(item)
}
const activeMenu = computed(()=>route.path)
// 定义菜单数据加载方法 没有下级菜单
const noChildern=computed(()=>list.value.filter(item=>!item.children));
// 定义菜单数据加载方法  有下级菜单
const hasChildern=computed(()=>list.value.filter(item=>item.children));
const store=useAllDataStore();
const isCollapse=computed(()=>store.state.isCollapse)
const width=computed(()=>store.state.isCollapse ? '64px':'180px')
</script>
<template>
  <el-aside :width="width">

        <el-menu
            background-color="#213547"
            text-color="#fff"
            :collapse="isCollapse"
            :collapse-transition="false"
            :default-active="activeMenu"
        >
          <h3 v-show="!isCollapse"> 博客后台管理 </h3>
          <h3 v-show="isCollapse"> 后台 </h3>
<!--          无子菜单数据遍历展示-->
          <el-menu-item
              v-for="item in noChildern"
              :index="item.path"
              :key="item.path"
              @click="handleMenu(item)"
          >
            <component class="icons" :is="item.icon"></component>
            <span>{{item.label}}</span>
          </el-menu-item>
<!--有子菜单数据展示-->
          <el-sub-menu
              v-for="item in hasChildern"
              :index="item.path"
              :key="item.path">
            <template #title>
              <component class="icons" :is="item.icon"></component>
              <span>{{item.label}}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                  v-for="(subItem,subIndex) in item.children"
                  :index="subItem.path"
                  :key="subItem.path"
                  @click="handleMenu(subItem)"
              >
                <component class="icons" :is="subItem.icon"></component>
                <span>{{subItem.label}}</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
  </el-aside>
</template>
<style lang="less" scoped>
//自定义菜单样式
.icons{
  width: 18px;
  height: 100%;
  margin-right: 5px;
}

.el-menu{
  border-right:none;
  h3{
    line-height: 48px;
    color: #ffffff;
    text-align: center;
  }
}
.el-aside{
  height: 100%;
  background-color: #213547;
}
</style>
